<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <title>动画</title>
</head>

<body>

  <div class="box">
    <div class="right-item left-item1">1</div>
    <div class="right-item right-item-fotter">
      <span>下面轮播</span>
      <div class="indicate">
        <div class="point left-point"></div>
        <div class="point right-point"></div>
      </div>
    </div>
    <div class="left-item left-item2" style="background: burlywood;">2</div>
    <div class="left-item left-item3" style="background: pink">3</div>
    <div class="left-item left-item4" style="background: black">4</div>
  </div>



</body>

</html>
<script>
  let obeyCilckSum = 1; // 顺时针
  let athwartClickSum = 1; // 逆时针
  let onOff = true;
  // $('.left-right').click(function(){

  // })

  $('.left-point').click(function () {
    if (onOff) {
      onOff = false
      switch (obeyCilckSum) {
        case 1:
          $('.left-item1').animate({ left: -400 })
          $('.left-item2').animate({ left: 0 })
          $('.left-item3').animate({ top: 0 })
          $('.left-item4').animate({ top: 200 }, function () {
            $('.left-item1').animate({ left: 400, top: 400 }, function () {
              obeyCilckSum = 2
              athwartClickSum= 4
              onOff = true
            })
          })

          break;
        case 2:
          $('.left-item1').animate({ left: 400, top: 200 })
          $('.left-item2').animate({ left: -400 })
          $('.left-item3').animate({ left: 0 })
          $('.left-item4').animate({ top: 0 }, function () {
            $('.left-item2').animate({ left: 400, top: 400 }, function () {
              obeyCilckSum = 3
              athwartClickSum= 3
              onOff = true
            })
          })
          break
        case 3:
          console.log("222")
          $('.left-item1').animate({ left: 400, top: 0 })
          $('.left-item2').animate({ left: 400, top: 200 })
          $('.left-item3').animate({ left: -400 })
          $('.left-item4').animate({ left: 0, top: 0 }, function () {
            $('.left-item3').animate({ left: 400, top: 400 }, function () {
              obeyCilckSum = 4
              athwartClickSum= 2
              onOff = true
            })
          })
          break
        case 4:
          $('.left-item1').animate({ left: 0, top: 0 })
          $('.left-item2').animate({ left: 400, top: 0 })
          $('.left-item3').animate({ left: 400, top: 200 })
          $('.left-item4').animate({ left: 400, top: 400 }, function () {
            $('.left-item3').animate({ left: 400, top: 200 }, function () {
              obeyCilckSum = 1
              athwartClickSum= 1
              onOff = true
            })
          })
        default:
          break;
      }
    }

  })

$('.right-point').click(function(){
  if (onOff) {
      onOff = false
      switch (athwartClickSum) {
        case 1:
          $('.left-item1').animate({ left: 400,top:0 })
          $('.left-item2').animate({ left: 400,top:200 })
          $('.left-item3').animate({ left: 400,top:400 })
          $('.left-item4').animate({ top: 0,left:0 }, function () {
            // $('.left-item1').animate({ left: 400, top: 400 }, function () {
            //   cilckSum = 4
            //   onOff = true
            // })
            athwartClickSum = 2
            obeyCilckSum = 4
            onOff = true
          })

          break;
        case 2:
          $('.left-item1').animate({ left: 400, top: 200 })
          $('.left-item2').animate({ left: 400,top:400})
          $('.left-item3').animate({ left: 0,top:0 })
          $('.left-item4').animate({ left:400,top: 0 }, function () {
            athwartClickSum = 3
            obeyCilckSum = 3
            onOff = true
          })
          break
        case 3:
          $('.left-item1').animate({ left: 400, top: 400 })
          $('.left-item2').animate({ left: 0, top: 0 })
          $('.left-item3').animate({ left: 400,top:0 })
          $('.left-item4').animate({ left: 400, top: 200 }, function () {
            // $('.left-item3').animate({ left: 400, top: 400 }, function () {
            //   cilckSum = 4
            //   onOff = true
            // })
            athwartClickSum = 4
            obeyCilckSum = 2
            onOff = true
          })
          break
        case 4:
          $('.left-item1').animate({ left: 0, top: 0 })
          $('.left-item2').animate({ left: 400, top: 0 })
          $('.left-item3').animate({ left: 400, top: 200 })
          $('.left-item4').animate({ left: 400, top: 400 }, function () {
            athwartClickSum = 1
            obeyCilckSum = 1
            onOff = true
          })
        default:
          break;
      }
    } 
})


</script>


<style>
  body {
    padding: 0;
  }

  .box {
    position: relative;
  }

  .left-item1 {
    position: absolute;
    left: 0;
    top: 0;
  }

  .left-item2 {
    position: absolute;
    left: 400px;
    top: 0;
  }

  .left-item3 {
    position: absolute;
    left: 400px;
    top: 200px;
  }

  .left-item4 {
    position: absolute;
    left: 400px;
    top: 400px;
  }

  .right-item-fotter {
    position: absolute;
    top: 200px;
  }


  .right-item {
    width: 400px;
    height: 200px;
    background: red;
    color: #fff;
    border: 1px solid #fff;
    box-sizing: border-box;
  }

  .right-item-fotter {
    height: 400px;
    z-index: 2;
  }

  .left-item {
    width: 400px;
    height: 200px;
    background: blue;
    border: 1px solid #fff;
    color: #fff;
    box-sizing: border-box;
  }



  .indicate {
    position: absolute;
    display: flex;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
  }

  .point {
    margin: 10px 10px;
    color: black;
    display: block;
    width: 30px;
    height: 30px;
    line-height: 20px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;

  }
</style>